import React from 'react'
class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  // componentDidMount() {
  //   const sondiv = document.getElementById('sondiv')
  //   const parentdiv = document.getElementById('parentdiv')
  //   sondiv.addEventListener(
  //     'click',
  //     e => {
  //       // e.stopPropagation()
  //       console.log('sondiv被点击了1')
  //     },
  //     true
  //   )
  //   sondiv.addEventListener(
  //     'click',
  //     e => {
  //       console.log('sondiv被点击了2')
  //     },
  //     false
  //   )

  //   parentdiv.addEventListener(
  //     'click',
  //     e => {
  //       console.log('parentdiv被点击了1')
  //     },
  //     true
  //   )
  //   parentdiv.addEventListener(
  //     'click',
  //     e => {
  //       console.log('parentdiv被点击了2')
  //     },
  //     false
  //   )
  // }
  sondivClick(e) {
    e.stopPropagation()
    console.log('sondivClick')
  }
  sondivClickCaptures(e) {
    console.log('sondivClickCaptures')
  }
  parentdivClick(e) {
    console.log('parentdivClick')
  }
  parentdivClickCapture(e) {
    console.log('parentdivClickCapture')
  }
  render() {
    return (
      <>
        <div
          id='parentdiv'
          onClick={e => this.parentdivClick(e)}
          onClickCapture={e => this.parentdivClickCapture(e)}
          style={{ width: '400px', height: '400px', backgroundColor: '#891029', textAlign: 'center' }}
        >
          <div
            id='sondiv'
            onClick={e => this.sondivClick(e)}
            onClickCapture={e => this.sondivClickCaptures(e)}
            style={{ width: '200px', height: '200px', backgroundColor: '#452671', textAlign: 'center' }}
          >
            test
          </div>
        </div>
      </>
    )
  }
}

export default Test
